<!-- <template>
  <div class="xf-mian_box pt-63px containerBox ">
    <img
      class="w-649px h-30px ml-100px"
      src="../../assets/login/title.png"
      alt=""
    />
    <div class="flex justify-center pt-242px">
      <div class="w-505px h-445px form_box">
        <div class="login_text mb-48px">登录</div>
        <div class="flex pb-10px items-center form_item">
          <div class="w-16px  mr-22px">
            <img
              class="w-16px mb-2px"
              src="../../assets/login/user.png"
              alt=""
            />
          </div>
          <input
            class="input-account"
            v-model="form.userName"
            type="text"
            placeholder="请输入账号"
          />
        </div>
        <p
          class="text-red-600"
          :class="['red-text', { show: validateForm.userName }]"
        >
          请输入账号
        </p>

        <div class="flex pb-10px items-center form_item">
          <div class="w-16px  mr-22px">
            <img
              class="w-16px mb-2px"
              src="../../assets/login/password.png"
              alt=""
            />
          </div>
          <input
            class="input-account flex-1"
            type="password"
            placeholder="请输入密码"
            v-model="form.passWord"
          />
          <div class="w-16px  ml-24px" @click="form.passWord = ''">
            <img
              class="w-16px "
              src="../../assets/login/del.png"
              alt=""
            />
          </div>
        </div>
        <p
          class="text-red-600"
          :class="['red-text', { show: validateForm.passWord }]"
        >
          请输入密码
        </p>

        <div class="flex items-center mb-26px">
          <div class="w-16px  mr-12px" @click="isJZ = !isJZ">
            <img
              v-if="isJZ"
              class="w-16px  mb-2px"
              src="../../assets/login/remember.png"
              alt=""
            />
            <img
              v-else
              class="w-16px mb-2px"
              src="../../assets/login/remember2.png"
              alt=""
            />
          </div>
          <div class="frogit">记住密码</div>
        </div>

        <div class="submit" @click="submit()">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useUserStore } from '../../store/login'



const userStore = useUserStore()
// userStore.login()


const form = reactive({
  userName: "",
  passWord: "",
});

const validateForm = reactive({
  userName: false,
  passWord: false,
});
const isJZ = ref(false);

const submit = () => {
  validateForm.userName = !form.userName;
  validateForm.passWord = !form.passWord;
  if (validateForm.userName || validateForm.passWord) return;
  let data = {
    username:form.userName,
    password:form.passWord
  }
  userStore.login(data)
};
</script>

<style scoped lang="less">
.xf-mian_box {
  height: 1080px;
}

.containerBox {
  min-width: 1920px;
  width: 2400px;
  background: url(../../assets/login/bg.png) no-repeat center;
  background-size: 100% 100%;
}
.form_box {
  background-image: url(../../assets/login/bg_item.png);
  background-size: 100% 100%;
  padding-left: 63px;
  padding-right: 63px;
}
.login_text {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #4dc2ff;
  line-height: 28px;
  margin-top: 67px;
}
.input-account {
  width: 100%;
  outline: none;
  border: none;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  box-sizing: border-box;
  background: transparent;
  &::placeholder {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ccc;
    line-height: 28px;
  }
}
.form_item {
  border-bottom: 1px solid #4dc2ff;
}
.red-text {
  font-size: 16px;
  margin: 7px 0 0px 39px;
  visibility: hidden;
  &.show {
    visibility: visible !important;
  }
}
.frogit {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #feffff;
  line-height: 28px;
}
.submit {
  width: 379px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #1d6faf 0%, #4dc2ff 100%);
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #f6f6f6;
  line-height: 28px;
}
</style> -->
